<template>
  <view class="goods-detail app-bg bottom-safe">
    <!-- #ifdef H5 -->
    <view class="btns" style="display: flex;">
      <u-button @click="download">下载APP</u-button>
      <u-button type="primary" @click="openAPP">APP内打开</u-button>
    </view>
    <!-- #endif -->
    <User :avatar="info.user.avatar" :name="info.user.nickname" isLink
      :url="`/pages/business-home/business-home?id=${info.user._id}`"></User>
    <Banner height="200" :list="info.pictures" />
    <view class="">
      <view class="section me-card">
        <!-- <view class="price">
                    <text class="unit">￥</text>
                    <text class="number">{{info.price}}</text>
                </view> -->
        <view class="title two-line-clamp">
          {{info.title}}
        </view>
      </view>
      <view class="section me-card">
        <u-cell-group>
          <u-cell title="价格">
            <view slot="value">
              <text class="price">{{info.price}}</text>
              <text>元</text>
            </view>

          </u-cell>
          <u-cell title="分类" :value="info.category.name"></u-cell>

          <!-- <u-cell title="联系QQ" :value="info.qq"
                        isLink
                        @click="toQQChat(info.qq)"
                    ></u-cell> -->
          <u-cell title="下架倒计时" :value="info.duration">
            <template slot="value">
              <CountDown v-if="info.duration"
                :endTimestamp="new Date(info.createTime).getTime() + info.duration * 24 * 60 * 60 * 1000"></CountDown>
            </template>
          </u-cell>
          <!-- <u-cell title="有效天数" :value="info.duration"></u-cell> -->
          <!-- <u-cell title="创建时间" :value="info.createTime"></u-cell> -->
        </u-cell-group>
      </view>
      <!-- <view class="desc-title">详情</view> -->
      <u-divider text="详情" :hairline="true"></u-divider>
      <view class="section me-card bottom-safe">
        {{info.description}}
      </view>
    </view>
    <view class="fixed-bottom">
      <u-button text="联系客服" @click="toChat"></u-button>
      <u-button type="primary" text="加入购物车" @click="joinCart"></u-button>
    </view>
  </view>
</template>

<script>
  import {
    isWxChrome
  } from '../../utils/tools.js'
  import {
    H5URL
  } from '@/api'
  export default {
    data() {
      return {
        info: {
          user: {},
          category: {}
        }
      }
    },
    methods: {
      getList(id) {
        this.$http.get(`/goods/${id}`).then(res => {
          console.log(res)
          this.info = res.data
        })
      },
      joinCart() {
        this.$http.post('/cart', {
          goodsId: this.info._id,
          businessId: this.info.user._id
        }).then((res) => {
          this.$tip.showToast(res.message)
        })
      },
      async toChat() {
        const {
          _id,
          nickname
        } = this.info.user
        if (this.$store.state.user._id === _id) {
          return this.$tip.showToast('不能和自己聊天哦！')
        }
        const friend = await this.$http.post('/friend', {
          friend: _id
        })
        this.$store.commit('addNewFriend', {
          friend: this.info.user
        })
        // 把当前新增好友加入消息列表
        this.$nav.to('/pages/chat/chat', {
          _id,
          nickname
        })
      },
      download() {
        window.location = 'http://mini-cloud.top/download/market.apk'
      },
      openAPP() {
        if (isWxChrome()) {
          this.$tip.showToast('请点击右上角三个小点，然后选择在浏览器打开后，再点击打开APP按钮！')
        } else {
          location.href = 'market://pages/goods-detail/goods-detail?id=' + this.info._id
          
          // const url = 'market://pages/goods-detail/goods-detail?id=' + this.info._id
          // const downloadURL = 'http://mini-cloud.top/download/market.apk'
          // let that = this
          // that.opening = true
          // const phoneInfo = uni.getSystemInfoSync()
          // if (phoneInfo.osName === 'android') { //  安卓处理
          //   let ifr = document.createElement('iframe');
          //   ifr.src = url;
          //   ifr.style.display = 'none';
          //   document.body.appendChild(ifr);
          //   that.timer = window.setTimeout(function() { //  未安装的情况
          //     that.opening = false
          //     document.body.removeChild(ifr);
          //     //  提示下载
          //     let r = confirm("未安装APP? 是否下载")
          //     if (r) {
          //       window.location = downloadURL
          //     }
          //   }, 5000)
          // } else { //  IOS处理
          //   this.$tip.showToast('暂时不支持iPhone版本')
          //   window.location = url
          //   that.timer = setTimeout(function() { //  未安装的情况
          //     that.opening = false
          //     //  跳转app store
          //     let r = confirm("未安装APP? 是否去App store查看")
          //     if (r) {
          //       window.location = 'https://apps.apple.com/cn/app/idxxxxxxxxxx'
          //     }
          //   }, 5000);
          // }
        }
      }
    },
    onNavigationBarButtonTap({
      type
    }) {
      if (type === 'share') {
        console.log('分享')
        // #ifdef APP-PLUS
        this.$tip.showLoading()
        uni.share({
          provider: 'weixin',
          scene: 'WXSceneSession',
          type: 0,
          title: this.info.title,
          summary: this.info.description,
          href: H5URL + '/pages/goods-detail/goods-detail?id=' + this.info._id,
          imageUrl: this.joinDomain(this.info.pictures[0].url),
          success: (e) => {
            console.log('分享成功', e)
          },
          fail: (e) => {
            console.log('分享失败', e)
          },
          complete: () => {
            console.log('分享完成')
          }
        })
        // #endif
        // #ifdef H5
        this.$tip.showToast('只能在APP分享')
        // #endif
      }
    },
    onLoad(e) {
      console.log(e)
      this.getList(e.id)
    },
    onShow() {
      this.$tip.hideLoading()
    }
  }
</script>

<style lang="scss" scoped>
  .section {
    padding: $me-padding-card;
    margin-bottom: 20rpx;

    .title {
      color: $uni-color-title;
    }

    .unit {
      font-size: 20rpx;
    }

    .price {
      color: $me-color-price;
    }
  }

  .desc-title {
    display: inline-block;
    margin: 0 10rpx;
    border-bottom: 6rpx solid $primary-color;
    margin-bottom: 10rpx;
    border-radius: 4rpx;
    font-size: 30rpx;
    font-weight: bold;
  }

  .fixed-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
  }
</style>
